<!-- 企业详情 -->
<template>
    <div class="box" >
        <div class="search">
           <div class="search-content">
                <div class="search-left">
                    <el-input
                    placeholder="请输入搜索内容"
                    v-model="keyWord"
                    autocomplete
                    maxlength="20"
                    show-word-limit
                    />
                </div>
                <div class="search-right">
                    <button @click="searchKeyWord()">查询</button>
                </div>
           </div>
        </div>
        <div class="top">
            <div class="top-content">
                <div>
                    <button  @click="showInput = true">增加企业</button>
                    <button @click="delIsChecked()">批量删除</button>    
                </div>
            </div>
        </div>
        <div class="content" ref="wrap">
          <el-table
            ref="multipleTable"
            :data="companys"
            border
            fit="false"
            stripe
            show-header
            highlight-current-row
            lazy
            load
            height="100%"
            :row-style="{height: '50px'}"
            @selection-change="handleSelectionChange"
            v-loading="isLoad"
          >
            <el-table-column type="selection" width="55" align="center" fixed />
            <el-table-column label="头像"  align="center" width="60" fixed>
                <template #default="scope">
                    <div style="display: flex; align-items: center">
                        <el-image :preview-src-list="scope.row.companyUrl" :src="scope.row.companyUrl" preview-teleported style="height:30px"/>
                    </div>
                </template>
            </el-table-column>
            <el-table-column property="companyName" label="企业名" show-overflow-tooltip width="120"/>
            <el-table-column property="companyFullname" label="企业全称" show-overflow-tooltip width="150"  />
            <el-table-column property="companyProfile" label="企业介绍" show-overflow-tooltip   width="300"/>
            <el-table-column property="establishDate" label="成立时间" width="120" />
            <el-table-column label="企业人数" show-overflow-tooltip   width="120">
                <template #default="scope">
                    {{ scope.row.companyNum }}人以上
                </template>    
            </el-table-column>
            <el-table-column label="企业类型" width="120" show-overflow-tooltip>
                <template #default="scope">
                    {{ scope.row.industrytype.industryTypeName }}
                </template>  
            </el-table-column>  
            <el-table-column label="融资类型" width="120" show-overflow-tooltip>
                <template #default="scope">
                    {{ scope.row.financing.financingName }}
                </template>  
            </el-table-column>
            <el-table-column property="legalPerson" label="企业法人" show-overflow-tooltip  width="120" />
            <el-table-column property="registeredCapita" label="注册资本" width="120" show-overflow-tooltip/>
            <el-table-column property="code" label="信用编码" show-overflow-tooltip width="120" />
            <el-table-column property="jobType" label="工作类型" show-overflow-tooltip width="120" />
            <el-table-column property="restType" label="休息类型" show-overflow-tooltip width="120" />
            <el-table-column property="toWork" label="上班时间" show-overflow-tooltip width="120" />
            <el-table-column property="offWork" label="下班时间" show-overflow-tooltip width="120" />
            <el-table-column align="center" width="140" fixed="right">
              <template #header>
                操作
              </template>
              <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.$index)">修改</el-button>
                <el-button
                  size="small"
                  type="danger"
                  @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 修改页面 -->
      <el-dialog v-model="showInput" top="4%" width="50%" :close-on-click-modal="false" :model="company" :destroy-on-close="true" @close="closeChange">
          <div style="width:50%;height:100%;float:left;padding:0 20px;box-sizing: border-box;">
            <!-- 图片上传 -->
            <div style="padding-bottom:10px;box-sizing: border-box;">
                <img v-if="up==1" :src="dialogImageUrl" style="width: 45%;border: 1px solid #ccc;float: left;border-radius: 10px;"/>
                <div style="width: 3%;height: 100%;float: left;">&nbsp;</div>
                <el-upload 
                action="#"
                list-type="picture-card" 
                :auto-upload="false" 
                :limit="1" 
                :on-change="changeFile"
                accept=".jpg, .jpeg, .png, .gif"
                ref="upload"
                :show-file-list="true"
                >
                    <i class="iconfont icon-jiahao"/>
                    <template #file="{ file }">
                    <div>
                        <img v-if="up==0" class="el-upload-list__item-thumbnail" :src="file.url" />
                        <span class="el-upload-list__item-actions">
                            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                <i class="iconfont icon-sousuo"/>
                            </span>
                            <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                <i class="iconfont icon-shanchu2"/>
                            </span>
                        </span>
                    </div>
                    </template>
                </el-upload>
                <el-dialog v-model="dialogVisible" top="1%" class="showImg">
                    <img :src="dialogImageUrl" alt="Preview Image" style="width:100%;height: 100%;"/>
                </el-dialog>
            </div>
            <el-form-item label="企业简称" >
                <el-input v-model="company.companyName" placeholder="请输入企业简称" autocomplete="off" style="width: 100%" clearable />
            </el-form-item>
            <el-form-item label="企业全称" >
                <el-input v-model="company.companyFullname" placeholder="请输入企业全称" autocomplete="off" style="width: 100%" clearable />
            </el-form-item>
            <el-form-item label="企业法人" >
                <el-input v-model="company.legalPerson" placeholder="请输入企业法人" autocomplete="off" style="width: 100%" clearable />
            </el-form-item>
            <el-form-item label="企业介绍" >
                <el-input
                type="textarea"
                resize="none"
                :autosize="{ minRows: 5, maxRows: 5}"
                placeholder="请输入企业介绍"
                v-model ="company.companyProfile"
                >
              </el-input>
            </el-form-item>
            <el-form-item label="成立时间" >
                <el-date-picker
                style="width: 100%"
                v-model="company.establishDate"
                type="date"
                placeholder="选择日期"/>
            </el-form-item>
          </div>
          <div style="width:50%;height:100%;float:left;padding:0 10px;box-sizing: border-box;">
            <el-form-item label="信用编码" >
                <el-input v-model="company.code" placeholder="请输入信用编码" autocomplete="off" style="width: 100%" clearable
                oninput ="value=value.replace(/[^\d]/g,'')"/>
            </el-form-item>
            <el-form-item label="注册资本" >
                <el-input v-model="company.registeredCapita" placeholder="请输入注册资本" autocomplete="off" style="width: 100%" clearable 
                onkeyup="value=value.replace(/[^\d^\.]/g,'')" ><template #append>元</template></el-input>
            </el-form-item>
            <el-form-item label="企业规模" >
                <el-input v-model="company.companyNum" placeholder="请输入企业规模" autocomplete="off" style="width: 100%" clearable 
                oninput ="value=value.replace(/[^\d]/g,'')"><template #append>人</template></el-input>
            </el-form-item>
            <el-form-item label="企业题库" v-if="up==0">
                <el-select v-model="topicId" placeholder="请选择题库类型" style="width:100%">
                    <el-option
                    v-for="item in topics"
                    :key="item.topicLibraryId"
                    :label="item.topicLibraryName"
                    :value="item.topicLibraryId"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="企业类型" >
                <el-select v-model="company.industryTypeId" placeholder="请选择企业类型" style="width:100%">
                    <el-option
                    v-for="item in industrys"
                    :key="item.industryTypeId"
                    :label="item.industryTypeName"
                    :value="item.industryTypeId"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="融资类型" >
                <el-select v-model="company.financingId" placeholder="请选择融资类型" style="width:100%">
                    <el-option
                    v-for="item in financings"
                    :key="item.financingId"
                    :label="item.financingName"
                    :value="item.financingId"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="工作类型" >
                <el-select v-model="company.jobType" placeholder="请选择工作类型" style="width:100%">
                    <el-option
                    v-for="item in works"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="休息类型" >
                <el-select v-model="company.restType" placeholder="请选择休息类型" style="width:100%">
                    <el-option
                    v-for="item in rests"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="上班时间" >
                <el-time-select
                    style="width:100%"
                    placeholder="起始时间"
                    v-model="company.toWork">
                </el-time-select>
            </el-form-item>
            <el-form-item label="下班时间" >
                <el-time-select
                    style="width:100%"
                    placeholder="结束时间"
                    v-model="company.offWork">
                </el-time-select>
            </el-form-item>
          </div>
        <div style="width: 100%;text-align: center;">
          <el-button @click="closeChange">取 消</el-button>
          <el-button type="primary" @click="addChange">确 定</el-button>
        </div>
      </el-dialog>

        <div class="bottom">
            <el-pagination
                background
                layout="prev, pager, next"
                :page-size="pageSize"
                @current-change="changePage"
                @prev-click="changePage"
                @next-click="changePage"
                :total="pageTotals"
            >
            </el-pagination>
        </div>
    </div>
</template>
<script>

import {getAllCompany,getAllPage,deleStore,getAllIndustry,getAllFinancing,updateStore,getAllTopic,addStoreTopic,getAllCom} from '../../api/secondary_api/store'
import {getImgUrl} from '@/api/datarequest'
import {ElMessage } from 'element-plus'

export default{
    name:'PageStoreManage',
     data() {
        return{
            isLoad:true,//加载页面
            pageNum:1,//页码
            pageSize:0,//页面总条数
            pageTotals:0,//总页数
            keyWord:"",//模糊查询的条件
            companys:[],//查询的企业
            multipleSelection: [],//被选中的行
            showInput:false,//显示修改页面
            dialogImageUrl: '',//
            dialogVisible: false,//
            disabled: false,//
            rests: [{//
                value: '1',
                label: '单休'
                }, {
                value: '2',
                label: '双休'
            }],
            works: [{//
                value: '1',
                label: '弹性工作'
                }, {
                value: '2',
                label: '非弹性工作'
            }],
            date:'',//成立时间
            startTime: '',//上班时间
            endTime: '',//下班时间
            imgUrl: '',//
            up:0,//点击修改
            topicId:"",//题库id
            company:{
                companyId:0,//企业id
                companyName:'',//企业名
                companyFullname: "",//企业全称
                companyProfile:'',//企业介绍
                companyUrl: "",//图片地址
                industryTypeId: '',//企业类型
                financingId: '',//融资类型
                legalPerson: "",//法人
                companyNum:'',//企业人数
                restType: "",//休息类型
                jobType: "",//工作类型
                registeredCapita: "",//注册资本
                establishDate: "",//成立时间
                code: "",//信用编码
                toWork: "",
                offWork:"",
            },
            industrys:[],//行业类型
            financings:[],//融资类型
            topics:[],//题库
        }
    },
    methods: {
        changeFile(file){
            this.up=0
            if (file.size / 1024 / 1024 > 1) {
                this.$message.error('上传头像图片大小不能超过 1MB!');
                this.$refs['upload'].clearFiles();
            }
            this.imgUrl = file.raw
            console.log(this.imgUrl);
        },
        handleRemove(){
            this.$refs['upload'].clearFiles()
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },

        handleEdit(index){//修改
            this.up=1
            this.showInput = true;
            this.company.companyId = this.companys[index].companyId;
            this.company.companyName = this.companys[index].companyName;
            this.company.companyFullname = this.companys[index].companyFullname;
            this.company.companyProfile = this.companys[index].companyProfile;
            this.company.companyUrl = this.companys[index].companyUrl;
            this.dialogImageUrl = this.companys[index].companyUrl;
            this.company.industryTypeId = this.companys[index].industryTypeId;
            this.company.financingId = this.companys[index].financingId;
            this.company.legalPerson = this.companys[index].legalPerson;
            this.company.companyNum = this.companys[index].companyNum;
            this.company.restType = this.companys[index].restType;
            this.company.jobType = this.companys[index].jobType;
            this.company.registeredCapita = this.companys[index].registeredCapita;
            this.company.establishDate = this.companys[index].establishDate;
            this.company.code = this.companys[index].code;
            this.company.toWork = this.companys[index].toWork;
            this.company.offWork = this.companys[index].offWork;
        },
        closeChange(){//关闭
            this.up =0
            this.company={
                companyId:0,//企业id
                companyName:'',//企业名
                companyFullname: "",//企业全称
                companyProfile:'',//企业介绍
                companyUrl: "",//图片地址
                industryTypeId: '',//企业类型
                financingId: '',//融资类型
                legalPerson: "",//法人
                companyNum:'',//企业人数
                companySize: '',//企业规模
                restType: "",//休息类型
                jobType: "",//工作类型
                registeredCapita: "",//注册资本
                establishDate: "",//成立时间
                code: "",//信用编码
                toWork: "",
                offWork: "",
            },
            this.showInput = false
        },
        addChange(){//确认
            getImgUrl(this.imgUrl).then(
                response=>{
                    this.company.companyUrl = response.data
                }
            )
            setTimeout(() => {
                this.addChange2()
            }, 500);
        },
        addChange2(){//确认
            if(this.company.companyUrl == ''){
                ElMessage.error('请添加图片')
            }else if(this.company.companyName == ''){
                ElMessage.error('企业简称不能为空')
            }else if(this.company.companyFullname == ''){
                ElMessage.error('企业全称不能为空')
            }else if(this.company.companyProfile == ''){
                ElMessage.error('企业介绍不能为空')
            }else if(this.company.establishDate == ''){
                ElMessage.error('请选择成立时间')
            }else if(this.company.legalPerson == ''){
                ElMessage.error('企业法人不能为空')
            }else if(this.company.registeredCapita == ''){
                ElMessage.error('注册资本不能为空')
            }else if(this.company.companyNum == ''){
                ElMessage.error('企业规模不能为空')
            }else if(this.company.code == ''){
                ElMessage.error('信用编码不能为空')
            }else if(this.company.industryTypeId == ''){
                ElMessage.error('请选择企业类型')
            }else if(this.company.financingId == ''){
                ElMessage.error('请选择融资类型')
            }else if(this.company.jobType == ''){
                ElMessage.error('请选择工作类型')
            }else if(this.company.restType == ''){
                ElMessage.error('请选择休息类型')
            }else if(this.company.toWork == ''){
                ElMessage.error('请选择上班时间')
            }else if(this.company.offWork == ''){
                ElMessage.error('请选择下班时间')
            }

            this.company.registeredCapita+="万元"
            this.company.toWork+=":00"
            this.company.offWork+=":00"
            var d = this.company.establishDate  
            this.company.establishDate=(d.getFullYear()) + '-' + ((d.getMonth() + 1)<10?("0"+(d.getMonth() + 1)):(d.getMonth() + 1)) + '-' + (d.getDate()<10?("0"+d.getDate()):d.getDate());
            if(this.company.restType == 1){
                this.company.restType ="单休"
            }else if(this.company.restType == 2){
                this.company.restType ="双休"
            }
            if(this.company.jobType == 1){
                this.company.jobType ="弹性工作"
            }else if(this.company.jobType == 2){
                this.company.jobType ="非弹性工作"
            }
            updateStore(this.company).then(
                response => {
                    if(response.code == 200){
                        ElMessage.success({message: '成功'})
                        this.changePage(this.pageNum)
                    }else if(response.code == 500){
                        ElMessage.error({message: '失败'})
                    }
                }
            )
            this.closeChange()
            setTimeout(() => {
                this.addStoreTop()
            }, 500);
        },
        addStoreTop(){//添加题库
            var id
            getAllCom().then(
                response => {
                    const all = response.data
                    id = all[response.data.length-1].companyId
                }
            )
            setTimeout(() => {
                let data={
                    topicLibraryId:this.topicId,
                    companyId:id
                }
                addStoreTopic(data).then(
                    response => {
                        console.log(response)
                    }
                )
            }, 500);
        },
        handleDelete(row){//删除
            this.deleFinanc(row.companyId)
        },
        delIsChecked(){//批量删除
            if(this.multipleSelection.length > 0){
                this.multipleSelection.forEach((item)=>{
                    this.deleFinanc(item.companyId)
                 })
            }else{
                ElMessage.error('请勾选内容')
            }
        },
        deleFinanc(id){//根据id删除
            deleStore(id).then(
                response=>{
                    if(response.code==200){
                        if(this.companys.length == 1){
                            this.changePage(this.pageNum-1)
                        }else{
                            this.changePage(this.pageNum)
                        }
                        ElMessage.success({message:'删除成功'})
                    }else{
                        ElMessage.error(response.message)
                    }
                }
            )
        },
        handleSelectionChange(val) {//全选
            this.multipleSelection = val;
        },
        changePage(e){//搜索分页切换
            if(e<1){
                e=1
            }
            this.isLoad = true;
            this.pageNum = e;
            this.searchKeyWord()
        },
        searchKeyWord(){//模糊查询
            this.searchCompany(this.pageNum,this.pageSize,this.keyWord)
        },
        searchCompany(pageNum,pageSize,keyWord){//查询企业
            getAllPage(keyWord).then(
                response=>{
                    if(response.code == 200){
                        this.pageTotals = response.data.length
                        getAllCompany(pageNum,pageSize,keyWord).then(
                            response=>{
                                if(response.code == 200){
                                    setTimeout(()=>{
                                        this.companys = response.data
                                        this.isLoad = false;
                                    },600)
                                }else{
                                    ElMessage.error(response.msg);
                                }
                            }
                        )
                    }else{
                        this.companys = []
                        this.pageTotals = 0
                        ElMessage.error(response.msg);
                    }
                }
            )
            }
        },
        mounted(){
            this.$nextTick(()=>{//计算每页显示多少条
                let $ele = this.$refs.wrap
                let height = $ele.offsetHeight
                this.pageSize = parseInt(height/50);
                this.searchCompany(this.pageNum,parseInt(height/50),this.keyWord)
            }),
            getAllIndustry().then(
                response=>{
                    this.industrys = response.data
                }
            ),
            getAllFinancing().then(
                response=>{
                    this.financings = response.data
                }
            ),
            getAllTopic().then(
                response=>{
                    this.topics = response.data
                }
            )
        },
    }
</script>

<style scoped>
    .box{
        width: 100%;
        /* height: calc(100vh - 151px); */
        font-style: 40px;
        overflow: hidden;
    }
    .top{
        width: 100%;
        padding: 0 2%;
        overflow: hidden;
    }
    .top-content{
        width: 96%;
        height: 35px;
        margin-top: 10px;
        overflow: hidden;
    }
     .top-content>div>button{
         width: 130px;
         height: 35px;
         line-height: 35px;
         color: #000;
         border-radius: 5px;
        border: 1px solid #fff;
     }
     button:hover{
         opacity: 0.5;
     }
      .top-content>div>button:nth-of-type(1){
          background-color: #00ffff;
     }
     .top-content>div>button:nth-of-type(2){
           background-color: red;
     }
     .search{
         width: 100%;
         padding: 0 2%;
         overflow: hidden;
     }
     .search-content{
         width: 96%;
         overflow: hidden;
         margin-top: 10px;
     }
     .search-left{
         width: 25%;
         float: left;
     }
    .search-right{
         width: 10%;
         float: left;
     }
     .search-left>.el-input{
         width: 100%;
     }
     .search-right>button{
         width: 100%;
         height: 32px;
         overflow: hidden;
         background-color: #00ffff;
         float: right;
        border: 1px solid #fff;
        border-radius: 5px;
     }
    .content{
        height: calc(100vh - 265px);
        margin-top: 5px;
        padding: 0 2%;
        position: relative;
        display: flex;
    }
   

    .delBtn{
        background-color: rgba(245, 6, 6, 0.973);
        color: #fff;
    }
     .editBtn{
        background-color: #0079f3;
        color: #fff;
    }
    .delBtn,.editBtn{
        width: 65px;
        height: 30px;
        line-height: 30px;
        border: 0px;
        border-radius: 5px;
        margin-left: 10px;
        border: 1px solid #fff;
    }
    .dialog-footer{
        margin-left:42%;
    }
    .addButton{
        width: 20px;
        height: 20px;
        font-size: 20px;
        line-height: 20px;
        background-color: #fff;
        position: absolute;
        right: 0;
    }
    .delButton{
        width: 20px;
        height: 20px;
        font-size: 20px;
        line-height: 20px;
        background-color: #fff;
        position: absolute;
        right: 30px;
    }
    .el-input{
        width: 50%; 
    }
    .el-input__count{
        height: 10%;
    }
    .bottom{
        margin: 20px 2%;
        box-sizing: border-box;
    }
    
</style>